<script setup>
import Steps from "!/Steps/Steps.vue";
import step from "!/Steps/step.vue";
import titleComponent from "!/title-component.vue";
import { reactive, ref } from "vue";
import { useStore } from "vuex";
const store = useStore();
const dialogTableVisible = ref(false);
const active = ref(1);
const day = ref(2)
const sign = ref(false);
const signSuccess = ref(false)
const privilege = reactive([
  {
    icon: "icon-mian",
    title: "满免运费",
    content:
      "会员购买商品单笔订单总金额达到标准后可免运费，不同等级会员满免运费标准不同。",
    privilege: true,
  },
  {
    icon: "icon-qiandao",
    title: "签到奖励",
    content:
      "会员每天最多可签到1次，签到后获得相应的奖励。连续签到多天可获得额外的奖励。",
    privilege: true,
  },
  {
    icon: "icon-pingjia",
    title: "评价奖励",
    content:
      "会员成功提交评论即获得相应的成长值奖励，不同等级会员给予不同数量的成长值奖励。",
    privilege: true,
  },
  {
    icon: "icon-libao",
    title: "专享活动",
    content:
      "黄金及以上会员专享活动，不定期福利优先享（看电影、烘焙课程、线下趴等）",
    privilege: true,
  },
  {
    icon: "icon-icon",
    title: "会员特价",
    content: "黄金及以上会员可在指定页面，享有会员价优惠商品。",
    privilege: false,
  },
  {
    icon: "icon-shengrix",
    title: "生日礼包",
    content: "完善生日资料后, 钻石会员可在生日周期间获得惊喜生日礼包。",
    privilege: false,
  },
]);

const signFn = () => {
  console.log('xx');
 if(!sign.value){
    sign.value = true;
   signSuccess.value = true
    ElMessage({
    message: '签到成功',
    type: 'success',
  })
 }
}

const close = () => {
   
  if(signSuccess.value){
    active.value += 1
    signSuccess.value = false
  }
}

</script>

<template>
  <div class="vip">
    <div class="vip-sign-in">
      <div class="vip-sign-card">
        <div class="avatar">
          <div class="avatar-img">
            <img :src="store.state.user.info.avatar" alt="" />
          </div>

          <div class="avatar-text">{{ store.state.user.info.nickname }}</div>
        </div>

        <Steps :active="active" width="50" height="50" color="#f19736">
          <step index="0" title="普通会员" icon="icon-sijiaoxing"></step>
          <step index="1" title="黄金会员" icon="icon-star"></step>
          <step
            index="2"
            title="白金会员"
            icon="icon-yuanjiaoliujiaoxing1"
          ></step>
          <step index="3" title="钻石会员" icon="icon-diamond"></step>
        </Steps>
        <div class="vip-sign-in-btn" @click="dialogTableVisible = true">
          每日签到
        </div>
      </div>
    </div>
    <div class="app-content-center">
      <div class="vip-privilege">
        <div class="title-nav">
          <div style="font-size: 17px">我的特权</div>
          <div style="font-size: 14px; color: #1abc9c">会员特权详细介绍</div>
        </div>
        <div class="vip-privilege-box">
          <div
            class="vip-privilege-item"
            v-for="(item, index) in privilege"
            :key="index"
          >
            <div class="lock" v-if="!item.privilege">
              <i class="iconfont icon-taocan-suoxiao"></i>
            </div>
            <i
              :class="'iconfont ' + item.icon"
              :style="{ color: item.privilege ? '#1abc9c' : '#d7d7d7' }"
            ></i>
            <div style="padding: 0 20px">
              <div style="color: #999999; font-size: 16px; font-weight: 1000">
                {{ item.title }}
              </div>
              <div style="color: #999999; margin-top: 5px">
                {{ item.content }}
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="vip-task-center-box">
        <titleComponent title="任务中心" link="/vip/center" />
        <div class="vip-task-center">
          <div class="vip-task-center-item">
            <div>
              <div style="font-size: 16px">完场首次登录</div>
              <div style="color: #aaa; margin-top: 10px">积分 +5</div>
            </div>

            <div class="vip-task-btn">去做任务</div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <el-dialog v-model="dialogTableVisible" :center="true" title="每日签到" @close="close">
    <div class="sign-in-box">
      <div
        class="sign-in-round-box"
        @click="signFn"
        :style="{ transform: sign ? 'rotateY(180deg)' : '' }"
      >
        <div class="round-sign">
          <div>
            <i class="iconfont icon-qiandao"></i>
          </div>
          <span>未签到</span>
        </div>
        <div class="round-sign-the">
          <div>
            <i class="iconfont icon-qiandao"></i>
          </div>
          <span>今日已签到</span>
        </div>
      </div>
      <div style="color: #fff; margin-top: 30px">
        坚持每天连续签到可以获多重奖励哦
      </div>
    </div>
    <div class="sign-in-day-box">
      <div
        class="sign-day-item"
        v-for="item in 8"
        :style="{ transform: sign && day == item ? 'rotateY(180deg)' : item < day ? 'rotateY(180deg)' : 'rotateY(0)' }"
        :key="item"
      >
        <div class="card front">
          <div style="height: 80%;">
            <i class="iconfont icon-qiandao1"></i>
          </div>
          <div style="height: 20%; background-color: #f2f2f2;line-height: 30px;color: #aaa;">第{{item}}天</div>
        </div>
        <div class="card back">
          <div style="height: 80%;">
            <i class="iconfont icon-qiandao1"></i>
          </div>
          <div style="height: 20%;background-color: #f2f2f2; line-height: 30px;color: #aaa;">第{{item}}天</div>
        </div>
      </div>
    </div>
    <div class="sign-in-prompt">
      <p>温馨提示：</p>
      <p>每日签到可获得10积分的奖励，连续完成8天签到可上额外获得奖励，连续签到满8天后将会重置签到记录。</p>
    </div>
  </el-dialog>
</template>


<style lang="scss">
.vip {
   
  transform: skew(180);
  background-color: #f5f5f5;
  .vip-sign-in {
    width: 100%;
    padding: 100px 0;
    background-color: #e4e4e4;

    .vip-sign-card {
      box-sizing: border-box;
      width: 40%;
      margin: 0 auto;
      background-color: #fff;
      padding: 100px 50px 30px 50px;
      border-radius: 20px;
      text-align: center;
      position: relative;

      .avatar {
        position: absolute;
        top: -30px;
        left: 0;
        width: 100%;
        .avatar-img {
          width: 70px;
          height: 70px;
          //  border: 1px solid #1abc9c;
          border-radius: 50%;
          margin: 0 auto;
          overflow: hidden;
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
        .avatar-text {
          margin-top: 10px;
          text-align: center;
          white-space: nowrap;
        }
      }
      .vip-sign-in-btn {
        display: inline-block;
        background-color: #1abc9c;
        padding: 10px;
        border-radius: 10px;
        cursor: pointer;
        color: #fff;
      }
    }
  }

  .vip-privilege {
    .title-nav {
      padding: 20px 0;
      display: flex;
      justify-content: space-between;
    }

    .vip-privilege-box {
      display: grid;
      grid-template-columns: repeat(2, calc((100% - 40px) / 2));
      gap: 40px;
      padding: 20px 0;

      .vip-privilege-item {
        position: relative;
        display: flex;
        background-color: #fff;
        border-radius: 10px;
        padding: 30px;
        align-items: center;
        color: #1abc9c;
        font-size: 14px;
        overflow: hidden;

        .lock {
          position: absolute;
          width: 0;
          height: 0;
          top: 0;
          right: 0;
          // border:  #ddd;
          border-left: 45px solid transparent;
          border-bottom: 45px solid transparent;
          border-top: 45px solid transparent;
          border-right: 45px solid #d7d7d7;
          transform: rotate(135deg) translate(-65px, 0px);

          .icon-taocan-suoxiao {
            font-size: 16px;
            color: #fff;
            position: absolute;
            left: 0;
            top: 0;
            transform: rotate(-135deg) translate(-5px, 25px);
          }
        }

        .iconfont {
          font-size: 70px;
        }
      }
    }
  }

  .vip-task-center-box {
    padding: 50px 0;
    .vip-task-center {
      .vip-task-center-item {
        background-color: #fff;
        display: flex;
        justify-content: space-between;
        padding: 30px 50px;
        align-items: center;

        .vip-task-btn {
          padding: 10px 40px;
          background-color: #1abc9c;
          color: #fff;
        }
      }
    }
  }
}

.sign-in-box {
  background-color: #1abc9c;
  text-align: center;
  padding: 30px 0;

  .sign-in-round-box {
    position: relative;
    width: 110px;
    height: 110px;
    transition: all 1s;
    margin: 0 auto;
    transform-style: preserve-3d;

    .round-sign {
      box-sizing: border-box;
      position: absolute;
      cursor: pointer;
      padding-bottom: 10px;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: 5px solid rgba($color: #1abc9c, $alpha: 0.5);
      border-radius: 50%;
      // color: rgb(228, 226, 226);
      // background-color: #1abc9c;
      background-color: #fff;
      color: #1abc9c;
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      .iconfont {
        font-size: 35px;
      }
      backface-visibility: hidden;
    }

    .round-sign-the {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      padding-bottom: 10px;
      justify-content: center;
      flex-direction: column;
      border: 5px solid rgba($color: #1abc9c, $alpha: 0.5);
      border-radius: 50%;
      // color: rgb(228, 226, 226);
      // background-color: #1abc9c;
      background-color: #fff;
      color: #1abc9c;
      transform: rotateY(180deg);
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      .iconfont {
        font-size: 35px;
      }

      backface-visibility: hidden;
    }
  }
}

.sign-in-day-box {
  background-color: #fff;
  padding: 30px 15%;
  display: grid;
  grid-template-columns: repeat(4, calc((100% - (20px * 3)) / 4));
  gap: 20px;
  .sign-day-item {
    position: relative;
    transition: all 1s;
    height: 150px;
    transform-style: preserve-3d;
    .card {
      border-radius: 5px;
      height: 100%;
      backface-visibility: hidden;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      text-align: center;
      overflow: hidden;
      .iconfont {
        font-size: 70px;
        color: #fff;
      }
    }
    .front {
      background-color: #cccccc;
    }
    .back {
      background-color: #1abc9c;
      transform: rotateY(180deg);
    }
  }
}

.sign-in-prompt{
   padding: 10px 30px;
}

.el-dialog__header {
  background-color: #1abc9c;
  margin-right: 0;

  .el-dialog__title {
    color: #fff;
  }
}
.el-dialog--center .el-dialog__body {
  padding: 0;
}
.el-dialog__headerbtn .el-dialog__close{
   color: #fff;
   font-size: 30px;
}
</style>
